<br />
<div class="form_container" style="width: 550px;">

	<table cellspacing="0" cellpadding="0">
		<tr>
			<td class="label">{translate}Department/Room{/translate}</td>
			<td class="field">
				<select id="departmentList" style="margin-left: 5px; width: 150px">
					<option value="all" label="{translate}All Departments/Rooms{/translate}">{translate}All{/translate}</option>
					{html_options options=$deptList}
				</select>				
			</td>			
			<td class="field" rowspan="2" align="right" width="100px">
				<div id="search_button">
					<a href="javascript:listService();" title="{translate}List of services{/translate}">
						<img src="../images/search.png" alt="{translate}List{/translate}" />
					</a>
				</div>
				<div style="display:none;">
					<img src="../images/ajax-loader.gif"/>
				</div>			
			</td>									
		</tr>
		<tr>
			<td id="current_dept" class="field" colspan="3"></td>
		</tr>
	</table>
</div>

<div id="service_container" style="display:none; margin-top: 5px">
	<span><i>{translate}Select services to save in to the surgery service table{/translate}</i></span>
	<table id="service_list" cellspacing="0" cellpadding="0" class="grid" width="780px">
		<thead>
			<tr>
				<th class='first'>{translate}Order number{/translate}</th>
				<th>{translate}Service{/translate}</th>
				<th class='last'>{translate}Select{/translate}</th>					
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<table class="total_table" cellspacing="0" cellpadding="0" width="780px">
		<tr style="height: 40px;">
			<td class="first"><span class="label">{translate}Total{/translate}: <span id="total"></span></span></td>
		</tr>
	</table>	
</div>

{include file="surgery/element_div_add_surgery_service.html"}